<template>
	<div class="swiper-list">
		<div class="swiper-main">
			<div class="swiper-container find-tips">
				<div class="swiper-wrapper">
					<div @click="check(0)" :class="{selected: '0' == cid}" class="swiper-slide">
						<span>全部</span>
					</div>
					<div v-for="cate in cate_list" @click="check(cate.id)" :class="{selected: cate.id == cid}" class="swiper-slide">
						<span>{{cate.name}}</span>
					</div>
				</div>
			</div>
		</div>
		<!--list-->
		<loading-small v-if="isloading"></loading-small>
		<ul class="list-ul home-swiper-main">
			<li class="list-li" v-for="article in article_list">
				<header class="list-header">
					<div class="list-user">
						<img class="list-user-head" :src="url + (article.avatar_path) + (article.avatar)" /> {{article.author}}
					</div>
					<div class="list-time">
						{{article.created_at}}
					</div>
				</header>
				<div @click="jumpArticleDetails(article.id)" class="list-main">
					{{article.description}}
					<img :src="url + (article.thumb_path) + (article.thumb)" />
				</div>
				<footer class="list-footer">
					<div class="list-see">
						<img src="../../assets/icon/see.png" />
						<span>{{article.click}}</span>
					</div>
					<div class="list-comment">
						<img src="../../assets/icon/comment.png" />
						<span>{{article.comment_count}}</span>
					</div>
					<div class="list-agree">
						<img src="../../assets/icon/agree.png" />
						<span>{{article.like_count}}</span>
					</div>
				</footer>
			</li>
			<no-msg v-if="noMsg" msg="该类型下没有文章"></no-msg>
		</ul>
	</div>
</template>

<script>
	import { formatDate } from '@/util/date'
	import NoMsg from "@/components/common/NoMsg"
	import LoadingSmall from "@/components/common/LoadingSmall"
	export default {
		data() {
			return {
				uid: '',
				token: '',
				cid: '',
				cate_list: [],
				article_list: [],
				t: [],
				page: '1',
				noMsg: false,
				isloading: true
			}
		},
		components: {
			NoMsg,
			LoadingSmall
		},
		filters: {
			//时间格式过滤器
			formatDate(time) {
				let date = new Date(time);
				return formatDate(date, 'MM-dd  hh:mm')
			}
		},
		mounted() {
			this.uid = localStorage.getItem('uid');
			this.token = localStorage.getItem('token');
			var self = this;
			//为窗口的scroll事件绑定处理函数 
			$(window).scroll(function() {
				//获取窗口的滚动条的垂直位置 
				var s = $(window).scrollTop();
				var sH = $(".ad").height();
				var hH = $(".top-header").height();
				//在h高度的位置固定不动
				var h = sH;
				if(s > h) {
					$(".swiper-main").addClass("swiper-fixed");
					$(".home-swiper-main").css("margin-top", 48 + "px");
				} else {
					$(".swiper-main").removeClass("swiper-fixed");
					$(".home-swiper-main").css("margin-top", 0 + "px");
				}
				if($(document).scrollTop() >= $(document).height() - $(window).height()) {
					//alert("滚动条已经到达底部为" + $(document).scrollTop());
					if(self.page < self.page_count) {
						self.page++;
						self.getList();
					} else {
						return 'noMore';
					}
				}
			});
			this.getCategory();
			this.check(0);
		},
		methods: {
			//选择类型
			check(id) {
				this.cid = id;
				this.article_list = [];
				this.isloading = true;
				this.getList();
			},
			//获取分类列表
			getCategory() {
				var self = this;
				var data = {};
				$.get(global.domain + global.API.information_category_list, data, function(msg) {
					//self.isloading = false;
					if(msg.error == 0) {
						self.cate_list = msg.data;
						self.url = msg.url;
						self.oss_url = msg.oss_url;
						self.$nextTick(function() {
							var swiper = new Swiper('.find-tips', {
								slidesPerView: '4'
							});
						});
					} else {
						console.log(msg.error);
					}
				}, 'json');
			},
			//获取文章列表
			getList() {
				var self = this;
				var data = {
					category_id: self.cid,
				};
				$.post(global.domain + global.API.information_article_list, data, function(msg) {
					self.isloading = false;
					self.$emit('hideLoad', false); //主动触发upup方法，'hehe'为向父组件传递的数据
					if(msg.error == 0) {
						self.t = msg.data;
						for(var i = 0; i < self.t.length; i++) {
							self.article_list.push(self.t[i]);
						};
						self.page_count = msg.page_count;
						self.url = msg.url;
						self.oss_url = msg.oss_url;
						if(msg.data.length > 0) {
							self.noMsg = false;
						} else {
							self.noMsg = true;
						}
					} else {
						console.log(msg.error);
					}
				}, 'json');
			},
			//跳转到文章详情页
			jumpArticleDetails(aid) {
				this.$router.push({
					name: 'ArticleDetails',
					params: {
						aid
					}
				});
			},
			//点赞、取消点赞
			like(id) {
				if(this.uid) {
					var self = this;
					var data = {
						id: id,
						uid: self.uid,
						token: self.token
					};
					$.post(global.domain + global.API.information_article_like, data, function(msg) {
						if(msg.error == 0) {
							self.article_list = [];
							self.isloading = true;
							self.getList();
						} else {
							console.log(msg.error);
							if(msg.is_auth == 0) {
								localStorage.clear();
								self.$router.push({
									path: '/login'
								});
							}
						}
					}, 'json');
				} else {
					this.$router.push({
						path: '/login'
					});
				}
			}
		}
	}
</script>

<style scoped>
	@import "../../style/homeSlide.css";
	@import "../../style/list.css";
	.noMsg {
		margin-top: 50px;
	}
</style>